<template>
    <div style="width: 100%" class="devices">
      <table  style="width: 100%" v-if="false">
        <thead>
          <th class="td-cell item-width">时间(H)</th>
          <th v-for="(h,i) in hours" class="hour-width td-cell "
              :key="i">
            {{h}}
          </th>
          <th class="total-width">总计</th>  <th class="dachen-width">达成率</th>  <th class="rate-width">合格率</th>
        </thead>
      </table>
      <ul class="left_boottom" v-bind:style="{width:width,height:'auto'}" >
        <li class="left_boottom_item"  v-bind:style="{width:width}" >
          <div class="inner_right" v-bind:style="{width:width}">
            <div class="flex">
              <div class="info ">
                <span class="td-cell item-width line-top" style="width: 6.5rem">时间（H）</span>
                <span class="td-cell hour-width line-top" v-for="(h,j) in hours" :key="j">{{h=='0'?'':h}}</span>
                <span class="td-cell hour-width line-top" >总计</span>
                <span class="td-cell hour-width line-top" >达成率</span>
                <span class="td-cell hour-width line-top" >合格率</span>
              </div>
            </div>
          </div>
        </li>
      </ul>

      <div id="deviceList" v-bind:style="{display: 'flex',height:height}" class="overflow-hidden" >
        <vue-seamless-scroll :class-option="defaultOption" :data="data">
          <ul class="left_boottom" v-bind:style="{width:width}">
            <li class="left_boottom_item"  v-bind:style="{width:width}" v-for="(item, i) in data" :key="i">
              <div class="inner_right" v-bind:style="{width:width}">
                <div class="flex">
                  <div class="info ">
                      <span class="td-cell item-width" style="width: 6.5rem">{{ item.device }}</span>
                     <span class="td-cell hour-width" v-for="(h,j) in item.data" :key="j">{{h=='0'?'':h}}</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>

      <table  class="devices" style="width: 100%" v-if="false" >
        <thead style="">
          <th>时间(H)</th>
          <th v-for="(h,i) in hours"
              :key="i">
            {{h}}
          </th>
          <th>总计</th>  <th>达成率</th>  <th>合格率</th>
        </thead>
        <tbody>
          <tr v-for="(row , i ) in store.data.deviceList"
              :key="i"
          >
            <td ><span>{{row.device}}</span></td>
            <td v-for="(v,j) in row.data" :key="j">{{v=='0'?'':v}}</td>
          </tr>
        </tbody>
      </table>
    </div>
</template>

<script>
//import BottomLeftChart from '@/components/echart/bottom/bottomLeftChart'
import store from './store'
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  components: {
    vueSeamlessScroll
  },
  props:{
    height:{
    },
    width:{},
    data:{
    },
  },
  data(){
    return{
      store,
      defaultOption: {
        singleHeight: 240,
        limitMoveNum: 5,
        //autoPlay: false,
        step: 1,

      },
      hours:["09:00","10:00","11:00","12:00","14:00","15:00","16:00","17:00","19:00","20:00","21:00","22:00"]
    }
  },
  mounted() {
    let s=document.getElementById('deviceList').children[0]
    s.style.width='100%'
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/variable.scss';
$box-height:auto;// 100%;
$box-width: 100%;

$item-width: 80px;
$hour-width: 65px;
$total-width: 63px;
$dachen-width: 55px;
$rate-width: 55px;

.devices{
 //border: 1px dashed #006569;
  color: lightslategrey;
  .overflow-hidden {
    overflow: hidden;
  }
  .td-cell{
    line-height: 50px;
    height: 50px;
    //border: 1px solid #01AAFF;
    border-bottom: 1px dashed #006569;
    border-right: 1px dashed #006569;
    text-overflow: ellipsis !important;

  }
  .line-top{
    border-top: 1px dashed #006569;
  }
  .item-width{
    width: $item-width;
    /*display: flex;*/
    padding-left: 5px;
    border-left: 1px dashed #006569;
    align-items: center;
    justify-content: center;
  }
  .hour-width{
    width: $hour-width;
    text-align: right;
    padding-right: 3px;
    align-items: center;
    justify-content: right;
  }
  .total-width{
    width: $total-width;
  }
  .dachen-width{
    width: $dachen-width;
  }
  .rate-width{
    width: $rate-width;
  }
  thead th{
    line-height: 150%;
    height: 50px;
    //border: 1px solid #01AAFF;
    border-bottom: 1px dashed #006569;
    border-right: 1px dashed #006569;
  }
  thead th:nth-last-child(1){
    border-right: 0px;
  }
  /*
  tbody tr:nth-child(2n) td{
  }
  tbody tr:nth-child(2n+1) td{
    border: 1px solid #33cea0;
  }*/
  tbody td{
    border-bottom: 1px dashed #006569;
    border-right: 1px dashed #006569;
    text-align: right;
    line-height: 150%;
    padding-right: 5px;
    height: 50px;
  }
  tbody td:nth-last-child(1){
    border-right: 0px;
  }
  tbody tr:nth-last-child(1) td{
    border-bottom: 0px
  }
  .left_boottom {
    width: 100%;
    height: 100%;

    .left_boottom_item {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0px;
      font-size: 14px;
      margin: 0px;
      .orderNum {
        margin: 0 16px 0 -20px;
      }

      .info {
        margin-right: 10px;
        display: flex;
        align-items: center;
       // color: #fff;

        .labels {
          flex-shrink: 0;
          font-size: 18px;
        // color: rgba(255, 255, 255, 0.6);
        }

        .zhuyao {
          color: $primary-color;
          font-size: 18px;
        }

        .ciyao {
          color: rgba(255, 255, 255, 0.8);
        }

        .warning {
          color: #e6a23c;
          font-size: 10px;
        }
      }

      .inner_right {
        position: relative;
        height: 100%;
        flex-shrink: 0;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        .dibu {
          position: absolute;
          height: 1px;
          width: 104%;
          background-image: url("../../assets/img/zuo_xuxian.png");
          bottom: -10px;
          left: -3%;
          background-size: cover;
        }
        .addresswrap {
          width: 100%;
          display: flex;
          margin-top: 8px;
        }
      }

      .wangguan {
        color: #1890ff;
        /*font-weight: 900;*/
        flex-shrink: 0;
      }


      .time {
        font-size: 10px;
        // color: rgba(211, 210, 210,.8);
       // color: #fff;
      }

      .address {
        font-size: 10px;
        cursor: pointer;
        // @include text-overflow(1);
      }

      .types {
        width: 30px;
        flex-shrink: 0;
      }

      .typeRed {
        color: #fc1a1a;
      }

      .typeGreen {
        color: #29fc29;
      }
    }
  }

  .animate {
    padding-left: 20px;
    font-size: 12px;
    color: #000;
    display: inline-block;
    white-space: nowrap;
    animation: 10s wordsLoop linear infinite normal;
  }

  @keyframes wordsLoop {
    0% {
      transform: translateX(200px);
      -webkit-transform: translateX(200px);
    }
    100% {
      transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
    }
  }

  @-webkit-keyframes wordsLoop {
    0% {
      transform: translateX(200px);
      -webkit-transform: translateX(200px);
    }
    100% {
      transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
    }
  }
}

</style>
